Browserbite: Cross-Browser Testing via Image Processing

Cross-browser compatibility testing is concerned with identifying perceptible differences in the way a Web page is rendered across different browsers or configurations thereof. Existing automated cross-browser compatibility testing methods are generally based on Document Object Model (DOM) analysis, or in some cases, a combination of DOM analysis with screenshot capture and image processing. DOM analysis however may miss incompatibilities that arise not during DOM construction, but rather during rendering. Conversely, DOM analysis produces false alarms because different DOMs may lead to identical or sufficiently similar renderings. This paper presents a novel method for cross-browser testing based purely on image processing. The method relies on image segmentation to extract “regions” from a Web page and computer vision techniques to extract a set of characteristic features from each region. Regions extracted from a screenshot taken on a baseline browser are compared against regions extracted from the browser under test based on characteristic features. A machine learning classifier is used to determine if differences between two matched regions should be classified as an incompatibility. An evaluation involving 140 pages shows that the proposed method achieves an F-score exceeding 90%, outperforming a state-of-the-art cross-browser testing tool based on DOM analysis.